<template>
    <div class="page">
        <el-tabs type="border-card">
            <el-tab-pane label="设备列表">
                <el-table border :data="deviceData" style="width: 100%">
                    <el-table-column prop="id" label="ID" width="80">
                    </el-table-column>
                    <el-table-column prop="name" label="设备名称" min-width="150">
                    </el-table-column>
                    <el-table-column prop="status" label="状态" min-width="80">
                    </el-table-column>
                    <el-table-column prop="type" label="接口类型" min-width="100">
                    </el-table-column>
                    <el-table-column prop="agree" label="通讯协议" min-width="150">
                    </el-table-column>
                    <el-table-column prop="address" label="从站地址" min-width="100">
                    </el-table-column>
                    <el-table-column prop="ip" label="IP地址/串口号" min-width="120">
                    </el-table-column>
                    <el-table-column prop="port" label="端口号" min-width="120">
                    </el-table-column>
                    <el-table-column prop="time" label="超时时间" min-width="120">
                    </el-table-column>
                </el-table>
                <div class="l-f l-row-end l-mg-top20">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="params.page" background :page-sizes="[20, 30, 50, 100]" :page-size="params.pageSize"
                        layout="sizes, prev, pager, next" :total="400">
                    </el-pagination>
                </div>
            </el-tab-pane>
            <el-tab-pane label="变量数据">
                <el-row class="l-mg-top10" :gutter="20">
                    <el-col :span="7">
                        <el-card>
                            <div class="l-f l-row-sb">
                                <h3>设备列表</h3>
                                <el-button type="primary" icon="el-icon-plus" size="mini"
                                    @click="onAddDevice">添加设备</el-button>
                            </div>
                            <el-table border :data="deviceData" style="width: 100%" :row-class-name="tableRowClassName"
                                @row-click="rowClick">
                                <el-table-column type="index" label="设备序号" width="120" style="background-color: red;">
                                </el-table-column>
                                <el-table-column prop="name" label="设备名称" min-width="180">
                                </el-table-column>
                            </el-table>
                        </el-card>
                    </el-col>
                    <el-col :span="17">
                        <el-card>
                            <div class="card-search">
                                <el-form ref="form" :model="params" label-width="70px" size="mini" inline>
                                    <el-form-item label="变量名称">
                                        <el-input v-model="params.name"></el-input>
                                    </el-form-item>
                                    <el-form-item label="变量别名">
                                        <el-input v-model="params.alias"></el-input>
                                    </el-form-item>
                                    <el-form-item label="分组">
                                        <el-select v-model="params.group" placeholder="请选择分组">
                                            <el-option label="分组一" value="shanghai"></el-option>
                                            <el-option label="分组二" value="beijing"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" size="mini">搜索</el-button>
                                        <el-button type="primary" size="mini" @click="onRead">读取</el-button>
                                        <el-button type="primary" size="mini" @click="onRefresh">刷新</el-button>
                                    </el-form-item>
                                </el-form>
                            </div>
                            <el-table border :data="listData" style="width: 100%" @selection-change="handleSelectionChange">
                                <el-table-column v-if="isShowSelection" type="selection" width="55">
                                </el-table-column>
                                <el-table-column prop="id" label="ID" width="80">
                                </el-table-column>
                                <el-table-column prop="name" label="变量名字" min-width="140">
                                </el-table-column>
                                <el-table-column prop="alias" label="变量别名" min-width="140">
                                </el-table-column>
                                <el-table-column prop="type" label="数据类型" min-width="150">
                                </el-table-column>
                                <el-table-column prop="register" label="寄存器" min-width="150">
                                </el-table-column>
                                <el-table-column prop="num" label="变量数值" min-width="150">
                                </el-table-column>
                                <el-table-column prop="time" label="更新时间" min-width="150">
                                </el-table-column>
                                <el-table-column label="操作" min-width="100" align="center">
                                    <template slot-scope="scope">
                                        <el-button @click="handleClick(scope.row)" type="text" size="small">写入</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <div class="card-pagination l-f l-row-sb">
                                <div>
                                    <template v-if="multipleSelection.length > 0 && isShowSelection">
                                        <el-button type="danger" size="mini" @click="onDelAll">批量删除</el-button>
                                        <el-button type="primary" size="mini" @click="onEditAll">批量修改</el-button>
                                    </template>
                                </div>
                                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                    :current-page="params.page" background :page-sizes="[20, 30, 50, 100]"
                                    :page-size="params.pageSize" layout="sizes, prev, pager, next" :total="400">
                                </el-pagination>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
  
<script>
export default {
    data() {
        return {
            deviceData: [
                {
                    id: 16,
                    name: '细纱机电表',
                    status: '开启',
                    type: '485串口',
                    agree: 'Modbus RTU',
                    address: '1',
                    ip: '/dev/ttyS1',
                    port: '9600, 8N1',
                    time: '1000ms'
                }
            ],
            listData: [
                {
                    id: 1,
                    alias: 'Uab',
                    name: 'Uab',
                    type: 'FLOAT',
                    register: '4x8193'
                },
                {
                    id: 2,
                    alias: 'Uab',
                    name: 'Uab',
                    type: 'FLOAT',
                    register: '4x8193'
                },
                {
                    id: 3,
                    alias: 'Uab',
                    name: 'Uab',
                    type: 'FLOAT',
                    register: '4x8193'
                },
                {
                    id: 4,
                    alias: 'Uab',
                    name: 'Uab',
                    type: 'FLOAT',
                    register: '4x8193'
                },
                {
                    id: 5,
                    alias: 'Uab',
                    name: 'Uab',
                    type: 'FLOAT',
                    register: '4x8193'
                }
            ],
            isShowSelection: false,
            multipleSelection: [],
            params: {
                page: 1,
                pageSize: 20,
                name: '',
                alias: '',
                group: ''
            },
        }
    },
    methods: {
        tableRowClassName({row, rowIndex}) {
            if (rowIndex === this.currentDeviceIndex) {
            return 'warning-row';
            }
            return '';
        },
        rowClick(row) {
            for (let i = 0; i < this.deviceData.length; i++) {
               if(this.deviceData[i].id === row.id) {
                this.currentDeviceIndex = i
                break
               }
            }
        },
         // 添加设备
         onAddDevice() {
            this.deviceVisible = true
        },
        // 添加变量
        onAddVariable() {
            this.variableVisible = true
        },
        // 批量选择
        onSelectAll() {
            this.isShowSelection = !this.isShowSelection
        },
        // 变量选择
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 批量修改
        onEditAll() {
            this.variableAllVisible = true
        },
        // 读取
        onRead() {

        },
        // 刷新
        onRefresh() {

        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        }
    }
}
</script>
  
<style lang="scss" scoped>
::v-deep .el-table .warning-row {
    background: #f0f9eb;
}
</style>